<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ page import="com.weitu.workflow.flowManagement.entity.WorkflowInstance,com.weitu.workflow.flowManagement.entity.WorkflowTaskInstance,com.weitu.workflow.flowManagement.entity.WorkItemInfo" %>
<!doctype html>
<html lang="zh">
<head>
    <title>流程监控</title>
    <%@include file="/common/header.jspf"%>
    <style type="text/css">
        .bpm{width: 100%;}
        .bpm-title{clear: both;width:100%;}
        .bpm-title ul{clear: both;display: block;overflow: hidden;box-sizing: border-box}
        .bpm .bpm-title li{
            float: left;
            width: 33.3%;
            text-align: center;
            border-right: 1px solid #fff;
            background: #68d4f8;
            font-size: 14px;
            color: #090909;
            padding: 10px 1px;box-sizing: border-box
        }
        .bpm-style{clear: both;width: 100%}
        .bpm-style ul{clear: both;display: block;overflow: hidden}
        .bpm-style ul li{
            float: left;
            width: 33.3%;
            height:20px;
            text-align: center;
            font-size: 14px;
            color: #090909;
            padding: 10px 0;
            background: #cdf1fb;
            border-bottom:1px dashed #A1CEF1;

        }
        .bpm-style img{float: left;margin-top: 8px;margin-left: 20px;cursor: pointer}
        .bpm-style a{float: left;text-align: center;line-height:19px;margin-left: 60px;}
        .bpm-style table{width:100%;}
        td{padding: 10px 0;text-align: center;}
        .table-title{background: #eee;color:#090909;}
        .table-title td{/*width: 141px;*/}
        .table-list td{color: #838484;border-bottom: 1px dashed #CACACA}
    </style>
</head>
<body>
    <div class="bpm">
        <ul>
            <li class="bpm-title">
                <ul>
                    <li>环节名</li>
                    <li>开始时间</li>
                    <li style="border-right: none">结束时间</li>
                </ul>
            </li>
            <c:if test="${workflowInstance!=null}">
                <c:forEach items="${workflowInstance}" var="entry">
                    <c:if test="${entry.key=='workflowInstance'}">
                        <li class="bpm-style">
                            <ul>
                                <li>开始</li>
                                <li>${entry.value.createdTime}</li>
                                <li>${entry.value.createdTime}</li>
                            </ul>
                        </li>
                    </c:if>
                </c:forEach>
                <c:forEach items="${workflowInstance}" var="entry">
                    <c:if test="${entry.key=='workflowTaskInstanceList'}">
                        <c:forEach items="${entry.value}" var="task">
                            <li class="bpm-style">
                            <c:forEach items="${task}" var="taskEntry">
                                <c:if test="${taskEntry.key=='workflowTaskInstance'}">

                                        <ul>
                                            <li><a onclick="foldWorkItem(this);"><img src="${ctx}/resources/themes/images/alias_03.png"></a><a>${taskEntry.value.displayName}</a></li>
                                            <li>${taskEntry.value.createdTime}</li>
                                            <li>${taskEntry.value.endTime}</li>
                                        </ul>

                                </c:if>
                            </c:forEach>
                            <c:forEach items="${task}" var="taskEntry">
                                <c:if test="${taskEntry.key=='workflowItemInfoList'}">
                                    <table cellpadding="0" cellspacing="0" style="display: none;">
                                    <tr class="table-title">
                                        <td  style="text-align: center">姓名</td>
                                        <td>部门</td>
                                        <td>开始时间</td>
                                        <td style="text-align: left">结束时间</td>
                                        <td>处理结果</td>
                                        <td>处理意见</td>

                                    </tr>
                                    <c:forEach items="${taskEntry.value}" var="workItem">

                                            <tr class="table-list">
                                                <td  style="text-align: center">${workItem.actorName}</td>
                                                <td></td>
                                                <td>${workItem.createdTime}</td>
                                                <td style="text-align: left">${workItem.endTime}</td>
                                                <td>${workItem.state==7?"同意":workItem.state==9?"不同意":""}</td>
                                                <td>${workItem.comments}</td>

                                            </tr>

                                    </c:forEach>
                                    </table>
                                </c:if>
                            </c:forEach>
                            </li>
                        </c:forEach>
                    </c:if>
                </c:forEach>
                <c:forEach items="${workflowInstance}" var="entry">
                    <c:if test="${entry.key=='workflowInstance'}">
                        <c:if test="${entry.value.state==7}">
                            <li class="bpm-style">
                                <ul>
                                    <li>结束</li>
                                    <li>${entry.value.createdTime}</li>
                                    <li>${entry.value.createdTime}</li>
                                </ul>
                            </li>
                        </c:if>
                    </c:if>
                </c:forEach>
            </c:if>


        </ul>
       <%-- <input type="button" value="关闭" onclick="cl4ose();" />--%>
    </div>
<script type="text/javascript">
    function foldWorkItem(dom){
        var tableDom=$(dom).parent().parent().next();
        if($(tableDom).is(":hidden")){
            $(tableDom).show();
        }else{
            $(tableDom).hide();
        }
    }
    /***
     * 关闭窗口
     */
    function cl4ose() {
        WindowManager.closeLayer()
    }
</script>
</body>
</html>
